import 'package:flutter/material.dart';
import 'package:flutter_grammar/tools/KeepAlivewWrapper.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _TabPageState();
}

/* 
tabs 显示的标签内容，一般使用Tab对象,也可以是其他的Widget
controller TabController对象
isScrollable 是否可滚动
indicatorColor 指示器颜色
indicatorWeight 指示器高度
indicatorPadding 底部指示器的Padding
indicator 指示器decoration，例如边框等
indicatorSize 指示器大小计算方式，TabBarIndicatorSize.label跟文字等
宽,TabBarIndicatorSize.tab跟每个tab等宽
labelColor 选中label颜色
labelStyle 选中label的Style
labelPadding 每个label的padding值
unselectedLabelColor 未选中label颜色
unselectedLabelStyle 未选中label的Style


 */

class _TabPageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController; // 暂存
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //  preferredSize组件 可以配置appbar高度
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(80),
        child: AppBar(
          title: SizedBox(
            height: 30,
            child: TabBar(
              indicatorColor: Colors.red,
              labelColor: Colors.red,
              unselectedLabelColor: const Color.fromARGB(255, 67, 63, 63),
              indicatorSize: TabBarIndicatorSize.label,
              controller: _tabController,
              tabs: [
                Tab(child: Text("热门")),
                Tab(child: Text("推荐")),
                Tab(child: Text("视频"))
              ],
            ),
          ),
        ),
      ),

      body: TabBarView(
        controller: _tabController,
        children: [
          // 缓存组件
          KeepAliveWrapper(
            child: ListView(
              children: <Widget>[
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("第一个tab")),
                ListTile(title: Text("最后一个tab"))
              ],
            ),
          ),
          Text("推荐"),
          Text("视频")
        ],
      ),
    );
  }
}
